<template>
  <div class="box">
    <!-- banner -->
    <div class="banner">
      <div class="banner-top">
        <div class="title_2">全网招投标信息 <div class="dian">·</div><span>智能查询及推送</span></div>
        <div class="seach">
          <el-input
            class="borderNone"
            v-model="input"
            placeholder="示例：办公用品 蒙牛乳业，多个关键词用空格隔开"
          />
          <el-button class="seach-button" circle @click="Jump1()"
            ><img src="../../assets/img/sousuo.png" alt="" /> 查询</el-button
          >
        </div>
        <div class="hot">
          <div class="hot-1">热门搜索:</div>
          <div
            class="hot-2"
            v-for="item in hot.value"
            @click="Jump2(item.hot_name)"
          >
            {{ item.hot_name }}
          </div>
        </div>
      </div>
    </div>
    <div class="statistic">
      <div class="statistic-1">
        <el-statistic title="" :value="outputValue" />
        <div class="statistic-2">独家招标</div>
      </div>
      <div class="statistic-1">
        <el-statistic title="" :value="outputValue1">
          <template #suffix>
            <div class="wan">亿+</div>
          </template>
        </el-statistic>
        <div class="statistic-2">标讯总数</div>
      </div>
      <div class="statistic-1">
        <el-statistic title="" :value="outputValue2">
          <template #suffix>
            <div class="wan">万+</div>
          </template>
        </el-statistic>
        <div class="statistic-2">标讯企业总数</div>
      </div>
      <div class="statistic-1" style="margin-left: 26px">
        <el-statistic title="" :value="outputValue3">
          <template #suffix>
            <div class="wan">万+</div>
          </template>
        </el-statistic>
        <div class="statistic-2" style="margin-right: 15px">建筑企业总数</div>
      </div>
      <div class="statistic-1">
        <el-statistic title="" :value="outputValue4">
          <template #suffix>
            <div class="wan">万</div>
          </template>
        </el-statistic>
        <div class="statistic-2">从业人员总数</div>
      </div>
      <div class="statistic-1">
        <el-statistic title="" :value="outputValue5">
          <template #suffix>
            <div class="wan">万+</div>
          </template>
        </el-statistic>
        <div class="statistic-2">业绩总数</div>
      </div>
    </div>
    <!-- 五大核心功能 -->
    <div class="fiveCore">
      <div class="fiveCore-2">six core functions</div>
      <div class="fiveCore-1">六大核心功能</div>
      <div class="heng"></div>
      <div class="tbs-tbs">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="找标讯" name="first">
            <img src="../../assets/newimg/组 5804@2x.png" alt="" />
          </el-tab-pane>
          <el-tab-pane label="找公司" name="second">
            <img src="../../assets/newimg/找公司.png" alt="" />
          </el-tab-pane>
          <el-tab-pane label="开拓渠道" name="third">
            <img src="../../assets/newimg/开拓渠道.png" alt="" />
          </el-tab-pane>
          <el-tab-pane label="采购预测" name="fourth">
            <img src="../../assets/newimg/采购预测.png" alt="" />
          </el-tab-pane>
          <el-tab-pane label="招标分析" name="fourth1">
            <img src="../../assets/newimg/招标分析.png" alt="" />
          </el-tab-pane>
          <el-tab-pane label="行业解决方案" name="fourth2">
            <img src="../../assets/newimg/行业解决方案.png" alt="" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="ty">
        <el-button class="Experience" type="primary" @click="Jump1()"
          >立即体验<img src="../../assets/img/路径 4232@2x.png" alt="" />
        </el-button>
      </div>
    </div>
    <!-- 大数据深度挖掘 -->
    <div class="deepMining">
      <div class="fiveCore-2">Deep mining of big data</div>
      <div class="fiveCore-1">大数据深度挖掘</div>
      <div class="heng" style="margin-top: 32px"></div>
      <div class="intelligentSearch">
        <div class="intelligentSearch-img">
          <img
            v-if="hide1 == 10"
            src="../../assets/newimg/组 5211@2x.png"
            alt=""
          />
          <img
            v-if="hide1 == 20"
            src="../../assets/newimg/组 6188@2x.png"
            alt=""
          />
          <img
            v-if="hide1 == 30"
            src="../../assets/newimg/组 6199@2x.png"
            alt=""
          />
          <img
            v-if="hide1 == 40"
            src="../../assets/newimg/组 6203@2x.png"
            alt=""
          />
          <img
            v-if="hide1 == 50"
            src="../../assets/newimg/组 6222@2x.png"
            alt=""
          />
        </div>
        <div>
          <div
            v-if="hide1 == 10"
            v-on:mouseover="show(10)"
            v-on:mouseout="hide(10)"
            class="boxxx"
          >
            <div class="boxxx-1">智能搜索</div>
            <div class="boxxx-2" v-if="hide1 == 10">
              全场景匹配搜索和丰富的筛选形式，使用更灵活，结果更精准
            </div>
          </div>
          <div
            v-else
            v-on:mouseover="show(10)"
            v-on:mouseout="hide(10)"
            class="boxxx1"
          >
            <div class="boxxx-1">智能搜索</div>
            <div class="boxxx-2" v-if="hide1 == 10">
              全场景匹配搜索和丰富的筛选形式，试用更灵活，结果更精准更
            </div>
          </div>
          <div
            v-if="hide1 == 20"
            v-on:mouseover="show(20)"
            v-on:mouseout="hide(10)"
            class="boxxx"
          >
            <div class="boxxx-1">360°企业情报</div>
            <div class="boxxx-2" v-if="hide1 == 20">
              历史招中标、项目联系人、采购趋势、合作商、工商注册信息、企业变更记录等全方位情报
            </div>
          </div>
          <div
            v-else
            v-on:mouseover="show(20)"
            v-on:mouseout="hide(10)"
            class="boxxx1"
          >
            <div class="boxxx-1">360°企业情报</div>
            <div class="boxxx-2" v-if="hide1 == 20">
              历史招中标、项目联系人、采购趋势、合作商、工商注册信息、企业变更记录等全方位情报
            </div>
          </div>
          <div
            v-if="hide1 == 30"
            v-on:mouseover="show(30)"
            v-on:mouseout="hide(10)"
            class="boxxx"
          >
            <div class="boxxx-1">竞争对手分析</div>
            <div class="boxxx-2" v-if="hide1 == 30">
              把握竞争对手动态，每次投标胜败复盘利器
            </div>
          </div>
          <div
            v-else
            v-on:mouseover="show(30)"
            v-on:mouseout="hide(10)"
            class="boxxx1"
          >
            <div class="boxxx-1">竞争对手分析</div>
            <div class="boxxx-2" v-if="hide1 == 30">
              把握竞争对手动态，每次投标胜败复盘利器
            </div>
          </div>
          <div
            v-if="hide1 == 40"
            v-on:mouseover="show(40)"
            v-on:mouseout="hide(10)"
            class="boxxx"
          >
            <div class="boxxx-1">企业关系图谱</div>
            <div class="boxxx-2" v-if="hide1 == 40">
              透视招投标相关企业背后关联本质
            </div>
          </div>
          <div
            v-else
            v-on:mouseover="show(40)"
            v-on:mouseout="hide(10)"
            class="boxxx1"
          >
            <div class="boxxx-1">企业关系图谱</div>
            <div class="boxxx-2" v-if="hide1 == 40">
              透视招投标相关企业背后关联本质
            </div>
          </div>
          <div
            v-if="hide1 == 50"
            v-on:mouseover="show(50)"
            v-on:mouseout="hide(10)"
            class="boxxx"
          >
            <div class="boxxx-1">医疗行业版</div>
            <div class="boxxx-2" v-if="hide1 == 50">
              收录全网医疗器械行业招投标信息，智能分析招中标趋势，助力企业有效获取商机
            </div>
          </div>
          <div
            v-else
            v-on:mouseover="show(50)"
            v-on:mouseout="hide(10)"
            class="boxxx1"
          >
            <div class="boxxx-1">医疗行业版</div>
            <div class="boxxx-2" v-if="hide1 == 50">
              收录全网医疗器械行业招投标信息，智能分析招中标趋势，助力企业有效获取商机
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="intelligentSearch">
                <a-tabs v-model:activeKey="activeKey" tab-position="right" animated @tab-click="handleClick2">

                    <a-tab-pane v-for="(item, index) in menuList" :key="item.id" :tab="item.con">
                        <div slot="label" @click="handleClick1(item.name)">
                            <img src="../../assets/img/组 5211@2x.png" alt="">
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div> -->
    </div>
    <!-- 根据您的需求是配解决方案 -->
    <div class="banner2">
      <div class="banner2-com">
        <div class="select-2">Adapt solutions according to your needs</div>
        <div class="select-1">根据您的需求试配解决方案</div>
        <div class="heng" style="margin-top: 25px"></div>
        <!-- <div class="banner2-1">Adapt solutions according to your needs</div>
        <div class="banner2-tit">根据您的需求试配解决方案</div> -->
        <div class="banner2-box">
          <div class="box-1">
            <div class="box-img">
              <img src="../../assets/img/组 5221@2x.png" alt="" />
            </div>
            <div class="box-tit">行业数据定制</div>
            <div class="box-heng"></div>
            <div class="banner-tit">
              为满足更详细的“数据分析”诉求，可提供定制化、个性化的数据导出需求
            </div>
          </div>
          <div class="box-1">
            <div class="box-img">
              <img src="../../assets/img/组 5222@2x.png" alt="" />
            </div>
            <div class="box-tit">CRM系统对接</div>
            <div class="box-heng"></div>
            <div class="banner-tit">
              一站式完成标讯跟进，有效解决多系统管理问题，赋能销售与管理
            </div>
          </div>
          <div class="box-1">
            <div class="box-img">
              <img src="../../assets/img/组 5223@2x.png" alt="" />
            </div>
            <div class="box-tit">API数据对接</div>
            <div class="box-heng"></div>
            <div class="banner-tit">
              丰富的API接口，无缝对接企业内部各个系统
            </div>
          </div>
          <div class="box-1">
            <div class="box-img">
              <img src="../../assets/img/组 5224@2x.png" alt="" />
            </div>
            <div class="box-tit">定制化推送</div>
            <div class="box-heng"></div>
            <div class="banner-tit">
              根据企业管理特点，可支持定制如：企业微信、邮件、短信等资讯推送
            </div>
          </div>
        </div>
        <el-button
          class="Experience"
          style="background-color: #f43107; color: #fff; margin-top: 40px"
          type="primary"
          @click="JumpWx()"
          >立即咨询</el-button
        >
        <div class="wximg" v-if="wximg==true">
        <img :src=ip+WxImgss alt="">
        <div style="font-size: 14px;margin-top: 5px;text-align: center;">扫描添加客服</div>
        <div style="font-size: 14px;font-weight: 600;margin-top: 10px;color: red">电话：{{ lxdh }}</div>
        </div>
        <div  class="wximg-1" v-if="wximg==true"></div>
      </div>
    </div>
    <!-- 10万+ 企业的选择 -->
    <div class="select">
      <div class="select-2">Choice of over 100000 enterprises</div>
      <div class="select-1">10万+ 企业的选择</div>
      <div class="heng" style="margin-top: 25px"></div>
      <div class="select-box" style="margin-top: 40px">
        <div class="whiteBackground" v-for="item in qyxzList">
          <img :src="ip + item.image" alt="" />
        </div>
        <!-- {{ item.image }} -->
      </div>
      <!-- <div class="select-box" style="margin-top: 40px">
        <div class="whiteBackground">
          <img src="../../assets/img/组 66@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 67@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 68@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 69@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 70@2x.png" alt="" />
        </div>
      </div>
      <div class="select-box" style="margin-top: 15px">
        <div class="whiteBackground">
          <img src="../../assets/img/组 71@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 72@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 73@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 74@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 75@2x.png" alt="" />
        </div>
      </div>
      <div class="select-box" style="margin-top: 15px">
        <div class="whiteBackground">
          <img src="../../assets/img/组 76@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 77@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 78@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 79@2x.png" alt="" />
        </div>
        <div class="whiteBackground">
          <img src="../../assets/img/组 80@2x.png" alt="" />
        </div>
      </div> -->
    </div>
    <!-- 最新行业资讯 -->
    <div class="industry">
      <div class="select-2">Latest industry news</div>
      <div class="select-1">最新行业资讯</div>
      <div class="heng" style="margin-top: 25px"></div>
      <div class="carousel">
        <el-carousel indicator-position="outside" :autoplay="false">
          <el-carousel-item v-for="(item, index) in liat_a.value" :key="index">
            <div
              class="carousel-img"
              v-for="(item1, index1) in item"
              :key="index1"
              @click="Jump4(item1.id)"
            >
              <img :src="ip + item1.image" alt="" />
              <div class="carousel-tit">
                {{ item1.title }}
              </div>
              <div class="carousel-st">{{ item1.startdate }}</div>
            </div>
            <!-- <div class="carousel-img">
              <img src="../../assets/img/蒙版组 343@2x.png" alt="" />
              <div class="carousel-tit">
                四川通信科研规划设计有限责任公司中标4395万元项目
              </div>
              <div class="carousel-st">2024-10-25</div>
            </div>
            <div class="carousel-img">
              <img src="../../assets/img/蒙版组 343@2x.png" alt="" />
              <div class="carousel-tit">
                四川通信科研规划设计有限责任公司中标4395万元项目
              </div>
              <div class="carousel-st">2024-10-25</div>
            </div> -->
          </el-carousel-item>
          <!-- <el-carousel-item>
            <div class="carousel-img">
              <img src="../../assets/img/蒙版组 336@2x.png" alt="" />
              <div class="carousel-tit">
                四川通信科研规划设计有限责任公司中标4395万元项目
              </div>
              <div class="carousel-st">2024-10-25</div>
            </div>
            <div class="carousel-img">
              <img src="../../assets/img/蒙版组 336@2x.png" alt="" />
              <div class="carousel-tit">
                四川通信科研规划设计有限责任公司中标4395万元项目
              </div>
              <div class="carousel-st">2024-10-25</div>
            </div>
            <div class="carousel-img">
              <img src="../../assets/img/蒙版组 336@2x.png" alt="" />
              <div class="carousel-tit">
                四川通信科研规划设计有限责任公司中标4395万元项目
              </div>
              <div class="carousel-st">2024-10-25</div>
            </div>
          </el-carousel-item> -->
        </el-carousel>
      </div>
      <div class="ty">
        <el-button class="Experience" type="primary" @click="Jump5()"
          >更多资讯<img src="../../assets/img/路径 4232@2x.png" alt="" />
        </el-button>
      </div>
    </div>
    <!-- 行业导航 -->
    <div class="industryNavigation">
      <div class="select-2">Industry Navigation</div>
      <div class="select-1">行业导航</div>
      <div class="heng" style="margin-top: 25px"></div>
      <div
        style="
          width: 1200px;
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          padding-top: 15px;
        "
      >
        <div class="card">
          <div class="card-1">
            <div class="card-tit">{{ tags[0] }}</div>
            <div class="card-con" v-for="item in industryList">
              <div class="card1" @click="tiaozhuan1(item)">
                {{ item.title }}
              </div>
              <div class="card2">{{ timestamp(item.release_time) }}</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-1">
            <div class="card-tit">{{ tags[1] }}</div>
            <div class="card-con" v-for="item in industryList1">
              <div class="card1" @click="tiaozhuan1(item)">
                {{ item.title }}
              </div>
              <div class="card2">{{ timestamp(item.release_time) }}</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-1">
            <div class="card-tit">{{ tags[2] }}</div>
            <div class="card-con" v-for="item in industryList2">
              <div class="card1" @click="tiaozhuan1(item)">
                {{ item.title }}
              </div>
              <div class="card2">{{ timestamp(item.release_time) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="
          width: 1200px;
          display: flex;
          justify-content: space-between;
          margin: 30px auto;
          padding-bottom: 13px;
        "
      >
        <div class="card">
          <div class="card-1">
            <div class="card-tit">{{ tags[3] }}</div>
            <div class="card-con" v-for="item in industryList3">
              <div class="card1" @click="tiaozhuan1(item)">
                {{ item.title }}
              </div>
              <div class="card2">{{ timestamp(item.release_time) }}</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-1">
            <div class="card-tit">{{ tags[4] }}</div>
            <div class="card-con" v-for="item in industryList4">
              <div class="card1" @click="tiaozhuan1(item)">
                {{ item.title }}
              </div>
              <div class="card2">{{ timestamp(item.release_time) }}</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-1">
            <div class="card-tit">{{ tags[5] }}</div>
            <div class="card-con" v-for="item in industryList5">
              <div class="card1" @click="tiaozhuan1(item)">
                {{ item.title }}
              </div>
              <div class="card2">{{ timestamp(item.release_time) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ty">
        <el-button class="Experience" @click="Jump11()" type="primary"
          >更多行业<img src="../../assets/img/路径 4232@2x.png" alt="" />
        </el-button>
      </div>
    </div>
    <!-- 地区导航 -->
    <div class="regionalNavigation">
      <div class="select-2">Regional Navigation</div>
      <div class="select-1">地区导航</div>
      <div class="heng" style="margin-top: 25px; margin-bottom: 40px"></div>
      <div class="Navigation-content">
        <div style="display: flex; position: relative">
          <div
            class="content-2"
            :class="{ checked: city_id === item.id }"
            v-for="item in contentList"
            @click="changeStatus(item)"
          >
            {{ item.title }}
          </div>
          <div class="content-1" @click="Jump1()">更多 >></div>
        </div>
        <div class="table">
          <el-table
            :data="tableData.value"
            style="width: 100%; margin-bottom: 25px"
            :show-overflow-tooltip="true"
            :row-style="{ height: '45px' }"
          >
            <el-table-column prop="title" label="公告名称" width="480">
              <template #default="scope">
                <div class="onCard" @click="tiaozhuan(scope.row)">
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="zbdw" label="招标公司名称" width="250" />
            <el-table-column
              prop="release_time"
              label="项目地区"
              :formatter="dateFormat1"
            />
            <el-table-column
              prop="release_time"
              label="发布时间"
              :formatter="dateFormat"
            />
            <!-- <el-table-column label="发布时间" width="180" :formatter="dateFormat" /> -->
          </el-table>
          <div class="ty">
            <el-button class="Experience" @click="Jump11()" type="primary"
              >更多地区<img src="../../assets/img/路径 4232@2x.png" alt="" />
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 友情链接 -->
    <div class="friendshipLink">
      <div class="select-2">Friendship link</div>
      <div class="select-1">友情链接</div>
      <div class="heng" style="margin-top: 27px; margin-bottom: 40px"></div>
      <div class="box1">
        <ul style="width: 1200px">
          <li class="box1-li" v-for="item in linkList.value">
            <a :href="item.link_url" target="demo.html" style="color: #226bf4">
              {{ item.name }}
            </a>
          </li>
          <!-- <li class="box1-li"><a>中原招标采购交易平台</a> </li>
                    <li class="box1-li"><a>合肥招投标中心</a> </li>
                    <li class="box1-li"><a>丹东供求信息</a> </li>
                    <li class="box1-li"><a>青岛公共资源交易</a> </li>
                    <li class="box1-li"><a>丹东供求网</a> </li>
                    <li class="box1-li"><a>阳光采购网</a> </li>
                    <li class="box1-li"><a>济宁政府采购网</a> </li>
                    <li class="box1-li"><a>禹城市人民政府</a> </li>
                    <li class="box1-li"><a>中原招标采购交易平台</a> </li>
                    <li class="box1-li"><a>合肥招投标中心</a> </li>
                    <li class="box1-li"><a>丹东供求信息</a> </li>
                    <li class="box1-li"><a>青岛公共资源交易</a> </li>
                    <li class="box1-li"><a>丹东供求网</a> </li>
                    <li class="box1-li"><a>阳光采购网</a> </li>
                    <li class="box1-li"><a>济宁政府采购网</a> </li>
                    <li class="box1-li"><a>禹城市人民政府</a> </li>
                    <li class="box1-li"><a>中原招标采购交易平台</a> </li>
                    <li class="box1-li"><a>合肥招投标中心</a> </li>
                    <li class="box1-li"><a>丹东供求信息</a> </li>
                    <li class="box1-li"><a>青岛公共资源交易</a> </li>
                    <li class="box1-li"><a>丹东供求网</a> </li>
                    <li class="box1-li"><a>阳光采购网</a> </li>
                    <li class="box1-li"><a>济宁政府采购网</a> </li> -->
        </ul>
      </div>
    </div>
    <Fot></Fot>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { ChatLineRound, Male } from "@element-plus/icons-vue";
import { useTransition } from "@vueuse/core";
import axios from "axios";
import { getHotSearch, logo,getCountzb } from "../../Api/homePage/index.js";
import { timestamp, diqu } from "@/utils/index";
import domData from "@/utils/json/dom.json";
import { friendshipLink } from "../../Api/homePage/index.js";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import Fot from "../../components/fotter/index.vue";
import { footer } from "../../Api/market/index";
const token = localStorage.getItem("token");


const WxImgss=ref()
const lxdh=ref()
  footer().then((res) => {
    WxImgss.value = res.data.data.footer_img
    lxdh.value = res.data.data.footer_vx
  });
const dateFormat = (row) => {
  return timestamp(row.release_time);
};
const dateFormat1 = (row) => {
  // console.log(row.provinceid);
  const filteredArr = domData.filter((num) => num.adcode == row.provinceid);
  // console.log(filteredArr[0].label);
  return filteredArr[0].label;
};
const jmtoken = ref('')
if (token==null) {
  jmtoken.value = '-1'
}else{
  jmtoken.value = token.toString()
}
//今日新增标讯
// const newBanner = ref()
const from = reactive({
  token:jmtoken.value
})

  getCountzb(from).then((res) => {

// })
// axios.post(`https://api.6ocbx.com/search/getCountzb?token='${jmtoken.value}'`).then((res) => {
  if (res.data.code == 1) {
    source.value = res.data.data.count;
    // source1.value = 2.9
    source1.value = 10;
    source2.value = 10000;
    source3.value = 20000;
    source4.value = 200;
    source5.value = 2100;
  } else {
    ElMessage.error(res.data.msg);
  }
});
// 行业导航
const tags = reactive([
  "房屋建筑",
  "市政服务",
  "信息电子",
  "科教文卫",
  "公路交通",
  "生物医药",
]);
const industryList = ref();
const industryList1 = ref();
const industryList2 = ref();
const industryList3 = ref();
const industryList4 = ref();
const industryList5 = ref();
axios
  .post(`https://api.6ocbx.com/search/getIndustryList?tags=${tags[0]}&token=${jmtoken.value}`)
  .then((res) => {
    if (res.data.code == 1) {
      industryList.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
axios
  .post(`https://api.6ocbx.com/search/getIndustryList?tags=${tags[1]}&token=${jmtoken.value}`)
  .then((res) => {
    if (res.data.code == 1) {
      industryList1.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
axios
  .post(`https://api.6ocbx.com/search/getIndustryList?tags=${tags[2]}&token=${jmtoken.value}`)
  .then((res) => {
    if (res.data.code == 1) {
      industryList2.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
axios
  .post(`https://api.6ocbx.com/search/getIndustryList?tags=${tags[3]}&token=${jmtoken.value}`)
  .then((res) => {
    if (res.data.code == 1) {
      industryList3.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
axios
  .post(`https://api.6ocbx.com/search/getIndustryList?tags=${tags[4]}&token=${jmtoken.value}`)
  .then((res) => {
    if (res.data.code == 1) {
      industryList4.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
axios
  .post(`https://api.6ocbx.com/search/getIndustryList?tags=${tags[5]}&token=${jmtoken.value}`)
  .then((res) => {
    if (res.data.code == 1) {
      industryList5.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
const menuList = reactive([
  { id: 1, name: "hahah1", con: ["智能搜索", "智能搜索", "智能搜索"] },
  { id: 2, name: "hahah2", con: "360°企业情报" },
  { id: 3, name: "hahah3", con: "竞争对手分析" },
  { id: 4, name: "hahah4", con: "企业关系图谱" },
  { id: 5, name: "hahah5", con: "医疗行业版" },
]);
const city_id = ref(0);
//链接
const linkList = reactive({});
friendshipLink().then((res) => {
  if (res.data.code == 1) {
    linkList.value = res.data.data;
    // console.log(hot.value);
  } else {
    ElMessage.error(res.data.msg);
  }
});
// axios.post('http://api.ldbx.com/web/link').then(res=>{

// })
const tableData = reactive([]);
// 地区导航按钮数据
const contentList = reactive([
  { id: 0, title: "全国" },
  { id: 110000, title: "北京" },
  { id: 310000, title: "上海" },
  { id: 440000, title: "广东" },
  { id: 330000, title: "浙江" },
  { id: 120000, title: "天津" },
  { id: 500000, title: "重庆" },
  { id: 320000, title: "江苏" },
  { id: 350000, title: "福建" },
  { id: 370000, title: "山东" },
  { id: 340000, title: "安徽" },
]);
// const active = ref(0);
// const filteredArr = reactive([])
//默认点击全国
axios.post(`https://api.6ocbx.com/search/getCityList?token=${jmtoken.value}`).then((res) => {
  if (res.data.code == 1) {
    tableData.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
const changeStatus = (number) => {
  // console.log(number);
  city_id.value = number.id;
  //表格虚拟数据
  axios
    .post(`https://api.6ocbx.com/search/getCityList?city_id=${city_id.value}&token=${jmtoken.value}`)
    .then((res) => {
      if (res.data.code == 1) {
        // console.log(tableData.value );
        tableData.value = res.data.data;
      } else {
        ElMessage.error(res.data.msg);
      }
    });
};
const wximg = ref(false)
const counts = ref(1)
//谈微信
const JumpWx= () =>{
  counts.value = counts.value+1
  if (counts.value % 2 == 0) {
    wximg.value = true
  }else{
    wximg.value = false
  }
  
}
//跳转
const router = useRouter();
const Jump1 = () => {
  router.push({
    path: `/search/${input.value}`,
  });
};
const Jump11 = () => {
  //  const href =   router.push({
  //     path: `/search/${input.value}`,
  //   });
  //   window.open(href, '_blank');
  const href = router.resolve({
    path: "/search",
  });
  window.open(href.href, "_blank");
};
const Jump2 = (event) => {
  // console.log(event);
  router.push({
    path: `/search/${event}`,
  });
};
const Jump4 = (event) => {
  // console.log(event);
  router.push({
    path: `/article/${event}`,
  });
};

const Jump5 = (event) => {
  // console.log(event);
  router.push({
    path: "/doc",
  });
};

const id = ref(0);
const tiaozhuan = (event) => {
  // console.log(event.nid,"888");
  const href = router.resolve({
     path: `/searchInfo`,
      query: {
          id: event.nid,
          // name: event,
        },
  });
  window.open(href.href, "_blank");
};
const tiaozhuan1 = (event) => {
  // console.log(event.nid,"777");
  const href = router.resolve({
     path: `/searchInfo`,
      query: {
          id: event.nid,
          // name: event,
        },
  });
  window.open(href.href, "_blank");
};

const hot = reactive([]);
getHotSearch().then((res) => {
  if (res.data.code == 1) {
    hot.value = res.data.data;
    // console.log(hot.value);
  } else {
    ElMessage.error(res.data.msg);
  }
});
const input = ref("");
const source = ref(0);
const source1 = ref(0);
const source2 = ref(0);
const source3 = ref(0);
const source4 = ref(0);
const source5 = ref(0);
const outputValue = useTransition(source, {
  duration: 1500,
});
const outputValue1 = useTransition(source1, {
  duration: 1500,
});
const outputValue2 = useTransition(source2, {
  duration: 1500,
});
const outputValue3 = useTransition(source3, {
  duration: 1500,
});
const outputValue4 = useTransition(source4, {
  duration: 1500,
});
const outputValue5 = useTransition(source5, {
  duration: 1500,
});

// 最新行业资讯
const ip = ref("https://api.6ocbx.com/");
const liat_a = reactive([]);
const liat_b = reactive([]);
const liat_c = reactive([]);
axios.post(`https://api.6ocbx.com/info/index?token=${jmtoken.value}`).then((res) => {
  if (res.data.code == 1) {
    // console.log(liat_a.value);
    liat_a.value = Object.values(res.data.data);
    // liat_b.value = res.data.data.liat_b
    // liat_c.value = res.data.data.liat_c
    // console.log(liat_a.value);
  } else {
    ElMessage.error(res.data.msg);
  }
});
const qyxzList = ref();
//企业的选择
logo().then((res) => {
  if (res.data.code == 1) {
    qyxzList.value = res.data.data;
    // console.log(hot.value);
  } else {
    ElMessage.error(res.data.msg);
  }
});
const activeName = ref("first");
const handleClick = (event) => {
  // console.log(event);
};
const hide1 = ref("10");
const activeKey = ref(1);
const show = (event) => {
  hide1.value = event;
};
const hide = (event) => {
  // console.log(event);
};
</script>

<!-- <style scoped lang="scss">
::v-deep .ant-tabs__item {
    line-height: 20px; //调节三行文字之间的距离
    height: 100px; //调节标签页之间的距离
}
</style> -->

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
}

.banner {
  width: 100%;
  height: 300px;
  // background: url("https://api.6ocbx.com/image/index.png");
  background: url("../../assets/newimg/banner.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
}

.banner-top {
  width: 1200px;
  height: 34px;
  //    display: flex;
  //    justify-content: center;
  //    margin: 46px 0 20px 185px;
  margin: 0 auto;
  padding: 46px 0 0 175px;
}

.title_2 {
  font-size: 34px;
  font-family: HYLingXinJ;
  font-weight: 400;
  line-height: 34px;
  color: #ffffff;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  margin-left: 10px;
  margin-bottom: 20px;
  display: flex;
  span {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #ffffff;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    line-height: 22px;
    margin-top: 6px;
  }
}

.seach {
  width: 850px;
  height: 60px;
  border-radius: 50px;
  background-color: #fff;
  position: relative;

  .el-input {
    width: 80%;
    height: 100%;
    margin-left: 30px;
  }

  .seach-button {
    position: absolute;
    right: 0;
    width: 120px;
    height: 60px;
    // background: #F43107;
    background: #f43107;
    opacity: 1;
    border-radius: 50px;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #ffffff;
  }

  img {
    width: 21px;
    height: 21px;
  }
}

// .el-input{
//     border: 1px solid #fff;
//     background-color: #000;
// }
:deep() {
  .el-input__wrapper {
    border: none !important;
    box-shadow: none !important;
  }

  .el-statistic__number {
    font-size: 34px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 20px;
    color: #f43107;
    opacity: 1;
  }

  .el-statistic {
    margin-top: 25px;
    margin-bottom: 20px;
  }
}

.hot {
  padding-top: 20px;
  display: flex;
  height: 14px;

  .hot-1 {
    margin-left: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #ffffff;
    opacity: 1;
  }

  .hot-2 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #ffffff;
    opacity: 1;
    margin-left: 30px;
    cursor: pointer;
  }
}

.statistic {
  width: 1200px;
  height: 100px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 10px;
  // margin: - 50px auto;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  margin: -50px auto;
  // left: 50%;
}

.statistic-1 {
  width: 16.666%;
  height: 100px;
  color: #ffffff;
  text-align: center;
  // line-height: 100px;
}

.statistic-2 {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  line-height: 0;
  // text-align: center;
}

.fiveCore {
  width: 100%;
  height: 770px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  // z-index: 0;
  padding-top: 50px;
}

.fiveCore-1 {
  font-size: 26px;
  font-family: SourceHanSansHWTC-Bold;
  font-weight: bold;
  line-height: 0px;
  color: #333333;
  opacity: 1;
  text-align: center;
  margin-top: -14px;
  z-index: 1000;
}

.fiveCore-2 {
  font-size: 26px;
  font-family: Spotlight-Demo-Italic-2;
  font-weight: bold;
  line-height: 0px;
  color: #dddddd;
  opacity: 1;
  text-align: center;
  padding-top: 70px;
}

.heng {
  width: 50px;
  height: 4px;
  background: #f43107;
  opacity: 1;
  border-radius: 0px;
  margin: 27px auto;
}

:deep() {
  // .el-tabs__nav-prev .is-disabled{
  //     display: none;
  // }
  // .el-tabs__nav-wrap .is-scrollable .is-top{
  //     display: none;
  //     width: 1px;
  // }
  .el-tabs__nav-prev {
    display: none;
    // width: 0;
  }

  .el-tabs__nav-next {
    display: none;
    // width: 0;
  }

  .el-tabs__header .is-top {
    width: 750px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50px;
  }

  .el-tabs--card > .el-tabs__header {
    // border: none;
  }

  .el-tabs__item.is-active {
    width: 150px !important;
    height: 40px;
    // background: #F43107;
    background: #f43107;
    opacity: 1;
    border-radius: 50px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0 !important;
  }

  .el-tabs__item {
    width: 150px !important;
    height: 40px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #a9b1be;
    border-radius: 50px !important;
    padding: 0;
    margin: 0 !important;
  }

  .el-tabs__nav-wrap::after {
    height: 0;
  }

  .el-tabs__active-bar {
    background: transparent;
  }

  .el-tabs__nav-wrap {
    margin: 0;
    padding: 0;
    // border: 1px solid hsl(234, 100%, 70%);
    border: 1px solid hsla(11, 94%, 49%, 1);
  }

  .el-tabs__nav-scroll {
    width: 750px !important;
    // height: 50px;
    // box-sizing: border-box;
    // border: 1px solid hsl(234, 100%, 70%);
  }

  .el-tabs__content {
    margin-bottom: 40px;
  }

  // .el-tabs__nav-wrap .is-scrollable .is-top{
  //      box-sizing: border-box;
  // }
}

// .tbs-tbs{
//     // width: 750px;
// height: 40px;
// background: #FFFFFF;
// opacity: 1;
// border-radius: 50px;
// margin: 0 auto;
// }

.el-tab-pane {
  width: 1100px;
  height: 407px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 100%;
  }
}

.ty {
  width: 100%;
  height: 40px;
}

.Experience {
  width: 180px;
  height: 40px;
  // background: #F43107;
  background: #f43107;
  border: 0;
  opacity: 1;
  border-radius: 8px;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;

  img {
    width: 26px;
    height: 10px;
    margin-left: 12px;
  }
}

.deepMining {
  width: 100%;
  height: 686px;
  background-image: url("../../assets/img/蒙版组 336@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
  // .fiveCore-2{

  // }
}

.intelligentSearch {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  display: flex;
}

.intelligentSearch-img {
  width: 850px;
  height: 500px;
  margin-right: 50px;

  img {
    width: 100%;
    height: 100%;
  }
}

.boxxx {
  width: 300px;
  min-height: 100px;
  // height: 100px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(102, 117, 255, 0.16);
  opacity: 1;
  border-radius: 10px;
  padding: 20px;
}

.boxxx1 {
  width: 300px;
  min-height: 100px;
  // background:none;
  // box-shadow: 0px 3px 6px rgba(102,117,255,0.16);
  // opacity: 1;
  // border-radius: 10px;
  padding: 20px;
}

.boxxx-1 {
  width: 252px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 0px;
  color: #3d4461;
  opacity: 1;
  margin-top: 10px;
}

.boxxx-2 {
  margin-top: 15px;
  width: 252px;
  // height: 34px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #a9b1be;
  opacity: 1;
}

.banner2 {
  width: 100%;
  height: 584px;
  // background-image: url("../../assets/img/蒙版组\ 337@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
}

.banner2-com {
  width: 1200px;
  height: 490px;
  margin: 0 auto;
  position: relative;
}

.banner2-tit {
  // width: 360px;
  height: 30px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 0px;
  // color: #ffffff;
  opacity: 1;
  text-align: center;
  padding-top: 60px;
}

.banner2-box {
  // width: 1200px;
  // height: 200px;
  display: flex;
  justify-content: space-between;
}

.box-1 {
  width: 285px;
  height: 324px;
  background: #FFFFFF;
  box-shadow: 0px 6px 10px rgba(0,0,0,0.16);
  // border-radius: 10px;
  // width: 285px;
  // height: 180px;
  // background: #ffffff;
  opacity: 1;
  border-radius: 10px;
  position: relative;
  margin-top: 20px;
  background-image: url("../../assets/img/蒙版组\ 423.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */

}

.box-1:hover {
  width: 285px;
  height: 324px;
  background: #FFFFFF;
  box-shadow: 0px 6px 10px rgba(0,0,0,0.16);
  opacity: 1;
  border-radius: 10px;
  position: relative;
  margin-top: -10px;
  background-image: url("../../assets/img/蒙版组\ 423.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
}
.box-img {
  width: 115px;
  height: 115px;
  // position: absolute;
  // left: 0;
  // right: 0;
  // top: -50px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 100%;
    margin-top: 50px;
  }
}

.box-tit {
  height: 18px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 0px;
  color: #3d4461;
  opacity: 1;
  padding-top: 78px;
  text-align: center;
  padding-bottom: 15px;
}

.box-heng {
  width: 40px;
  height: 2px;
  background: #f43107;
  opacity: 1;
  border-radius: 0px;
  margin: 10px auto;
}

.banner-tit {
  width: 238px;
  height: 34px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #a9b1be;
  opacity: 1;
  text-align: center;
  margin: 0 auto;
}

.select {
  width: 100%;
  height: 636px;
  background-image: url("../../assets/img/组 5230@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
}

.select-2 {
  font-size: 26px;
  font-family: Spotlight-Demo-Italic-2;
  font-weight: bold;
  line-height: 0px;
  color: #dddddd;
  opacity: 1;
  text-align: center;
  padding-top: 68px;
}

.select-1 {
  font-size: 26px;
  font-family: SourceHanSansHWTC-Bold;
  font-weight: bold;
  line-height: 0px;
  color: #333333;
  opacity: 1;
  text-align: center;
  margin-top: -13px;
  z-index: 1000;
}

.select-box {
  width: 1200px;
  // height: 140px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}

.whiteBackground {
  margin-top: 10px;
  width: 224px;
  height: 140px;
  background-image: url("../../assets/img/白色背景.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;

  /* 覆盖整个元素 */
  img {
    width: 100%;
    height: 100%;
  }
}

.industry {
  width: 100%;
  height: 620px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
}

.carousel {
  width: 1200px;
  height: 410px;
  margin: 0 auto;
  padding-top: 20px;
  // display: flex;
}

:deep() {
  .el-carousel__item {
    width: 1200px !important;
    display: flex;
    justify-content: space-between;
  }

  .el-carousel__container {
    width: 1200px !important;
    // height: 500px;
  }

  .el-carousel__item .is-active .is-animating {
    display: flex !important;
  }

  .carousel-img {
    width: 380px !important;
    height: 300px !important;
    display: inline-block;
    position: relative;
    background: #ffffff;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 20px;
    
    // padding-top: 23px;
    img {
      border-radius: 20px 20px 0 0;
      width: 100%;
      height: 200px;
    }
  }
  // .carousel-img :hover{
  //  position: absolute;
  //  top:-10px;
    
  // }

  .carousel-tit {
    margin: 20px;
    width: 324px;
    height: 38px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 22px;
    color: #333333;
    opacity: 1;
    cursor: pointer;
  }

  .carousel-st {
    margin-top: -10px;
    height: 12px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 12px;
    color: #a9b1be;
    opacity: 1;
    position: absolute;
    right: 20px;
   
  }

  .el-carousel__indicators {
    // 指示灯位置
    // width: 30px;
    // height: 4px;
    // background: #E6E9FF;
    // opacity: 1;
    // border-radius: 10px;
    // text-align: center;
    // position: relative;
    // left:50%;
    // right: 0;
    // margin: 20px auto;
    // top: -100px;
  }

  .el-carousel__button {
    // 默认按钮的颜色大小等
    width: 30px;
    height: 4px;
    border: none;
    border-radius: 10px;
    background: #e6e9ff;
    opacity: 1;
    margin-top: 30px;
  }

  .is-active .el-carousel__button {
    // 选中图片的颜色
    background: red;
    opacity: 1;
  }
}

.industryNavigation {
  width: 100%;
  height: 740px;
  background-image: url("../../assets/img/组\ 5233@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
}

.card {
  width: 1200px;
  display: flex;
  justify-content: center;
}

.card-1 {
  width: 380px;
  height: 226px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 20px;
}

.card-tit {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 30px;
  color: #333333;
  opacity: 1;
  margin: 20px;
}

.card-con {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.card1 {
  width: 241px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.card2 {
  //   width: 80px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #a9b1be;
  opacity: 1;
}

.regionalNavigation {
  width: 100%;
  height: 850px;
  background-image: url("../../assets/img/组\ 5236.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  /* 覆盖整个元素 */
}

.Navigation-content {
  width: 1200px;
  height: 674px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 10px;
  margin: 0 auto;
  padding: 30px;
}

.content-2 {
  width: 58px;
  height: 24px;
  background: #fff;
  opacity: 1;
  line-height: 24px;
  border-radius: 4px;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
}

.checked {
  width: 58px;
  height: 24px;
  background: #f43107;
  opacity: 1;
  line-height: 24px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
}

.content-1 {
  // width: 60px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #f43107;
  opacity: 1;
  position: absolute;
  right: 0;
  cursor: pointer;
}

.table {
  margin-top: 25px;
}

:deep() {
  .el-table__header th {
    width: 1140px;
    height: 50px;
    background: #FCE2E0;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
  }
}

.friendshipLink {
  width: 100%;
  height: 328px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
}

.box1-li {
 
 // width: 142px;
 height: 34px;
 background: #ffffff;
 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
 opacity: 1;
 border-radius: 4px;
 padding: 10px 15px;
 background-color: #fff;
 margin-right: 20px;
 margin-bottom: 20px;

 a{
   position: relative;
   text-decoration: none;
 }
 a:hover {
   text-decoration: underline;
   bottom: -2px;
}
}

.wan {
  font-size: 34px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 20px;
  color: #f43107;
}

li {
  list-style: none;
  float: left;
}

ul {
  width: 100%;
  // animation: move 5s linear infinite;
}

.box1 {
  width: 1200px;
  height: 150px;
  margin: 40px auto;
  overflow: hidden;
  ul{
    display: flex;
    justify-content: center;
  // align-items: center;
  flex-wrap: wrap; /* 换行 */
  }
}

/* 定义动画 让图片不断的向左移动 */
// @keyframes move {
//     to {
//     transform: translateX(-1200px);
//     }
// }
// .box1:hover ul {
//     animation-play-state: paused;
// }

.onCard {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dian{
  width: 6px;
  margin: 0 10px;
}
.wximg{
  width: 190px;
  height: 238px;
  background: #FFFFFF;
  box-shadow: 0px 6px 30px rgba(0,0,0,0.16);
  border-radius: 10px;
  position: absolute;
  bottom: 25px;
  left: 505px;
  padding: 20px;
  img{
    width: 100%;
    height: 150px
  }
}
// .wximg-1{

// }
.wximg-1 {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #FFF;
  position: absolute;
  bottom: 11px;
  left: 590px;
  // box-shadow: 0px 6px 30px rgba(0,0,0,0.16);
  // padding: 20px;
}
</style>
